<template>
  <div class="User">
    <head-title>用户中心</head-title>
    <div class="userInfor">
      <div class="left">
        <img :src="$axios.defaults.baseURL + info.head_img" alt="" />
      </div>
      <div class="center">
        <div class="top">
          <i class="iconfont iconxingbienan"></i>
          <i class="iconfont iconxingbienv"></i>
          <span>{{ info.nickname }}</span>
        </div>
        <div>{{ info.create_date | date }}</div>
      </div>
      <div class="right">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="我的关注" is-link value="关注的用户" @click="MyFollow" />
      <van-cell
        title="我的跟帖"
        is-link
        value="跟帖/回复"
        @click="$router.push('/mycomments')"
      />
      <van-cell
        title="我的收藏"
        is-link
        value="文档/视频"
        @click="$router.push('/mystar')"
      />
      <van-cell title="设置" is-link @click="edit" />
      <van-cell title="退出" is-link @click="exit" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
    };
  },
  methods: {
    exit() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确认退出了吗",
        })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("id");
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
    edit() {
      this.$router.push("/edit");
    },
    MyFollow() {
      this.$router.push("/myfollow");
    },
  },
  async created() {
    const id = localStorage.getItem("id");
    const res = await this.$axios.get(`/user/${id}`);
    this.info = res.data.data;
    console.log(res);
  },
};
</script>

<style scope lang='less'>
.User {
  .userInfor {
    display: flex;
    height: 60px;
    .left {
      width: 60px;
      margin: 0 10px;
      img {
        width: 100%;
      }
    }
    .center {
      flex: 1;
      padding: 10px;
      font-size: 15px;

      .top {
        padding-bottom: 10px;
      }
    }
    .right {
      line-height: 60px;
    }
  }
}
</style>
